<template>
  <div class="card">
    <div class="left">
      <div v-for="(item, index) in list" :key="item.title" class="item">
        <div class="title">{{ item.title }}</div>
        <div class="content">
          <el-icon :color="item.color" :class="'icon icon' + index">
            <component :is="item.icon"></component>
          </el-icon>
          {{ item.value }}
        </div>
      </div>
    </div>
    <div clss="right">
      <div class="mb10">上下线次数排行（近24小时）</div>
      <el-table :data="rankList" border stripe>
        <el-table-column prop="deviceSn" label="设备号"></el-table-column>
        <el-table-column prop="onlineNum" label="上下线次数"></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getOnlineAndOfflineNum, getDeviceOnlineNumRank } from "@/api/modules/device";
import { getMinAgoUnix, transformDate } from "@/utils";
import { onMounted, ref } from "vue";
const list = ref([
  {
    title: "设备总数",
    value: 0,
    icon: "Histogram",
    color: "#ff8411"
  },
  {
    title: "设备在线",
    value: 0,
    icon: "Open",
    color: "#1cc9c5"
  },
  {
    title: "设备离线",
    value: 0,
    icon: "TurnOff",
    color: "#909399"
  }
]);
const rankList = ref<Array<any>>([]);
onMounted(() => {
  getOnlineAndOfflineNum().then((res: any) => {
    list.value[0].value = res.data.onlineNum + res.data.offlineNum;
    list.value[1].value = res.data.onlineNum;
    list.value[2].value = res.data.offlineNum;
  });
  const params = {
    rankNum: 10,
    startTime: getMinAgoUnix(60 * 24),
    endTime: transformDate(new Date(), "unix") as number
  };
  getDeviceOnlineNumRank(params).then(res => {
    rankList.value = res.data as Array<any>;
  });
});
</script>
<style lang="scss" scoped>
.card {
  display: grid;
  grid-template-columns: 2fr 1fr;
  height: 100%;
  .left {
    display: flex;
    justify-content: space-evenly;
    .item {
      width: 100%;
      .content {
        display: flex;
        align-items: center;
        margin-top: 10px;
        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 40px;
          height: 40px;
          margin-right: 10px;
          border-radius: 8px;
        }
        .icon0 {
          background-color: #fee4ba;
        }
        .icon1 {
          background-color: #e8fffb;
        }
        .icon2 {
          background-color: #f4f4f5;
        }
        .num {
          font-size: 24px;
          color: rgb(0 0 0 / 85%);
          text-overflow: ellipsis;
          word-break: break-all;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
